<template>
  <div class="youshi">
    <img src="@/assets/images/bg4.png" alt class="bg" />

    <div class="main">
      <div class="title" data-aos="fade-up">手感细腻 横式立式皆可摆放</div>
      <div class="sub" data-aos="fade-up">采用阳极氧化喷绘工艺，表面成色均匀，主机强韧不变形</div>

      <div class="blank" style="height:100px"></div>

      <div class="pic">
        <img data-aos="fade-up" src="@/assets/images/197.png" alt />
      </div>
      <div class="pic" style="width:1300px;transform: translateX(-55px);">
        <img data-aos="fade-right" src="@/assets/images/l1.png" alt />
        <img data-aos="fade-up" src="@/assets/images/wg8.png" alt />
        <img data-aos="fade-left" src="@/assets/images/r1.png" alt />
      </div>
      <div class="pic">
        <img data-aos="fade-up" src="@/assets/images/wg7.png" alt />
      </div>
      <div class="pic">
        <div class="flex">
          <img data-aos="fade-right" src="@/assets/images/38.png" alt />
          <img data-aos="fade-right" src="@/assets/images/wg1.png" alt />
        </div>
        <div class="flex">
          <img data-aos="fade-left" class="heng" src="@/assets/images/wg5.png" alt />
          <img data-aos="fade-left" src="@/assets/images/wg4.png" alt />
        </div>
      </div>
      <div class="pic">
        <img data-aos="fade-right" src="@/assets/images/wg2.png" alt />
        <img data-aos="fade-left" src="@/assets/images/wg3.png" alt />
      </div>

      <div class="title" data-aos="fade-up">接口齐备 轻松扩展</div>
      <div class="sub" data-aos="fade-up">人人云平衡于轻薄与实用之间， 配备多种扩展接口，即插即用，方便快捷</div>
      <div class="pic flex">
        <img data-aos="fade-up" src="@/assets/images/jiekou.png" alt />
        <img data-aos="fade-up" class="jiekou2" src="@/assets/images/jiekou2.png" alt />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.youshi {
  position: relative;
  margin-top: -600px;
}
.bg {
  max-width: 100%;
  min-width: 1900px;
}
.main {
  position: absolute;
  z-index: 9;
  top: 600px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  margin-top: 100px;
  height: 79px;
  font-size: 60px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  line-height: 79px;
  letter-spacing: 4px;
}
.sub {
  margin-top: 10px;
  height: 37px;
  font-size: 28px;
  font-family: MicrosoftYaHei;
  color: rgba(153, 153, 153, 1);
  line-height: 37px;
  letter-spacing: 2px;
}
.pic {
  margin-top: 60px;
  display: flex;
  min-width: 500px;
  justify-content: space-between;
  align-items: center;
  .heng {
    transform: translate3d(100px, 0, 0) rotate(90deg);
  }
  [data-aos^="fade"][data-aos^="fade"].aos-animate {
    opacity: 1;
    transform: translateZ(0) !important;
  }
}
.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jiekou2 {
  margin-top: -160px;
  margin-left: -120px;
}
</style>